<template>

  <table class="table table-striped" aurelia-table="data.bind: users; display-data.bind: $displayData;
                                              current-page.bind: currentPage; page-size.bind: pageSize; total-items.bind: totalItems;">
    <thead>
    <tr>
      <th></th>
      <th>Username</th>
      <th>Joined</th>
      <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr repeat.for="user of users">
      <td><a href="#" route-href="route: user-edit;params.bind: {id:user.id}"><i
        class="icon-pencil"></i></a>
      </td>
      <td>${user.username}</td>
      <td>${user.joinDate}</td>
      <td>${user.status}</td>
    </tr>
    </tbody>
  </table>

  <div class="row">
    <div class="col-md-9">
      <aut-pagination current-page.bind="currentPage" page-size.bind="pageSize" total-items.bind="totalItems"
                      pagination-size.bind="5" boundary-links.bind="true"></aut-pagination>
    </div>

    <div class="col-md-3">
      <div class="form-inline">
        <div class="form-group pull-right">
          <label for="pageSize">Page Size: </label>
          <select value.bind="pageSize" id="pageSize" class="form-control">
            <option model.bind="5">5</option>
            <option model.bind="10">10</option>
            <option model.bind="20">20</option>
            <option model.bind="50">50</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>
